<div
   #wrapper
   (window:resize)="windowResized()"
   class="flex flex-auto">
  <div
     #primary
     class="col overflow-hidden flex maxheight-100pct">
    <ng-content select="[split-pane-primary-content]"></ng-content>
  </div>
  <div
     #secondary
     class="col overflow-hidden flex maxheight-100pct">
    <ng-content select="[split-pane-secondary-content]"></ng-content>
  </div>
  <!-- These style properties are inline because they define the behaviour of the resizer bar, which is invisible. -->
  <div
     #resizer
     (mousedown)="resizerMouseDown($event)"
     style="width: 6px; top: 0; bottom: 0; margin-right: -3px; cursor: ew-resize; z-index: 500; position: absolute;">
  </div>
  <!-- These style properties are inline because they define the behaviour of the overlay, which is invisible. -->
  <div
     #overlay
     style="z-index: 5000; position: absolute; cursor: ew-resize; top: 0; left: 0; right: 0; bottom: 0; display: none;"></div>
</div>
